import {useEffect, useState} from "react";
import {gdMapFun} from "@/views/gaudMap/mapFun";
import '../index.less'

const GdMap = () => {
    const [map, setMap] = useState()
    const mapModelList = [
        {
            name: '普通撒点',
            onclick: () => {
            }
        }
    ]
    useEffect(() => {
        console.log('子组件更新')
        setTimeout(() => init(), 1000)
    }, [])
    const init = async () => setMap(await gdMapFun.InitMap('Container'))
    useEffect(() => {
        if (map) {
            gdMapFun.setMapStyle(map, 'f1a19ef420e096588eff80f7b7be9dc6')
            gdMapFun.setZoomCentrer(map, 12, [121.238825, 31.353284])
        }
    }, [map])
    return (
        <div className={'map-box'}>
            <div id={'Container'} style={{width: '100%', height: '100%'}}></div>
            <ul className={'map-model'}>
                {mapModelList.map(item => (
                    <li><a>{item.name}</a></li>
                ))}
            </ul>
        </div>
    )
}

export default GdMap
